<template>
  <view
    class="personal-list-part relative rounded-2"
    :style="`height: ${height}rpx`"
  >
    <view
      class="w-[100%] h-[100%] box-border z-5 absolute left-0 top-0 flex flex-row relative"
      :style="contentStyle"
    >
      <view class="left" :style="`width: ${leftWidth}rpx;`">
        <slot name="left"></slot>
      </view>
      <view class="left-line mx-2" v-if="showGapLine"></view>
      <slot name="right"></slot>
      <view class="tag-view" v-if="showStatus">
        <uni-tag
          :text="statusName"
          type="success"
          :custom-style="customStyle"
        />
      </view>
    </view>
    <image
      class="absolute top-0 right-0 w-[143rpx] h-[143rpx]"
      :src="avatar1Icon"
      mode="scaleToFit"
    />
  </view>
</template>

<script setup>
import avatar1Icon from "@/static/icon/avatar1.png";
const props = defineProps({
  height: {
    type: Number,
    default: 208,
  },
  contentStyle: {
    type: Object,
    default: {
      padding: "16rpx",
    },
  },
  leftWidth: {
    type: Number,
    default: 170,
  },
  showGapLine: {
    type: Boolean,
    default: false,
  },
  showStatus: {
    type: Boolean,
    default: false,
  },
  statusName: {
    type: String,
    default: "",
  },
  statusBgColor: {
    type: String,
    default: "#33A954",
  },
});

const customStyle = ref("");
watch(
  () => props.statusBgColor,
  (val) => {
    customStyle.value = `background-color:${props.statusBgColor}; border: none; color: #fff;font-size:25rpx; border-radius: 8rpx; height:35rpx; line-height:35rpx; padding: 4rpx 16rpx;`;
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.personal-list-part {
  width: 100%;
  box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
  background: linear-gradient(180deg, #daeaf6 0%, #f7f8fc 100%);
  .left {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-line {
    height: 100%;
    border-left: 0.8rpx solid #bbbbbb;
  }
  .tag-view {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    ::v-deep .u-tag {
      height: 36rpx !important;
      line-height: 36rpx !important;
      font-size: 26rpx !important;
      border-radius: 8rpx !important;
      padding: 0 12rpx !important;
    }
  }
}
</style>
